<template>
	<view class="my-order">
		<NewLine></NewLine>
		<view class="order-header">
			<view class='header-item' :class=" orderIndex === index? 'active':'' " v-for="(item,index) in orderList"
				:key="index" @tap="changeTap(index)">{{item.name}}</view>
		</view>

		<block v-for="(tapItem,tapIndex) in orderList" :key="tapIndex">
			<view v-show="tapIndex === orderIndex">
				<view class="order-main" v-if="tapItem.list.length > 0" :style="'height:'+swHeight+'px;'">

					<view v-for="(k,i) in tapItem.list" :key='i'>
						<!-- 商品 -->
						<view class="order-shop">
							<view class="shop-status f-active-color">{{k.status}}</view>
							<view class="shop-item" v-for="(shopItem,shopIndex) in k.shop_item" :key="shopIndex">
								
								<orderList :shopItem='shopItem' :shopIndex='shopIndex'></orderList>
								
							</view>

						</view>

						<NewLine></NewLine>
						<!-- 总价 -->
						<view class="total-price">
							订单金额:<text class="f-active-color">${{k.totalPrice}}</text>(包含运费$0.00)
						</view>

						<NewLine></NewLine>
						<!-- 支付 -->
						<view class="payment">
							<view class="payment-text">
								支付
							</view>
						</view>

					</view>
				</view>


				<view class="no-order" :style="'height:'+swHeight+'px;'" v-else>
					<view class="no-order-home">你还没有相关订单</view>
					<view>去首页逛逛</view>
				</view>

			</view>

		</block>

	</view>

</template>

<script>
	import NewLine from '@/component/line.vue'
	import orderList from '@/component/order-list.vue'
	export default {
		data() {
			return {
				swHeight: 0,
				orderIndex: 0,
				orderList: [{
						name: '全部',
						list: [{
							status: "待付款",
							totalPrice: '1000',
							shop_item: [{
									imgUrl: '../../static/img/运动鞋.png',
									name: '世界各地的开发人员使用 GitHub Copilot 来更快地编写代码,世界各地的开发人员使用 GitHub Copilot',
									attrs: '黑色',
									pprice: '299',
									num: "1"
								},
								{
									imgUrl: '../../static/img/运动鞋.png',
									name: '世界各地的开发人员使用 GitHub Copilot 来更快地编写代码,世界各地的开发人员使用 GitHub Copilot',
									attrs: '黑色',
									pprice: '299',
									num: "5"
								},

							]
						}]

					},
					{
						name: '代付款',
						list: []
					},
					{
						name: '待发货',
						list: []
					},
					{
						name: '待收货',
						list: []
					},
					{
						name: '待评价',
						list: []
					}
				]
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.swHeight = res.windowHeight - uni.upx2px(120) - this.getSystemHeight();
				}
			})
		},
		methods: {
			changeTap(index) {
				this.orderIndex = index
			},
			// 获取可视区高度
			getSystemHeight() {
				const res = uni.getSystemInfoSync();
				// console.log(res.platform, res.statusBarHeight)
				const system = res.platform;
				if (system === 'ios') {
					return 44 + res.statusBarHeight;
				} else if (system === ' android') {
					return 48 + res.statusBarHeight;
				} else {
					return 0;
				}
			}
		},
		components: {
			NewLine,
			orderList
		}
	}
</script>

<style scoped>
	.no-order {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.no-order-home {
		padding: 6rpx 60rpx;
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 40rpx;
	}

	.order-header {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #f7f7f7;
	}

	.header-item {
		text-align: center;
		flex: 1;
		line-height: 120rpx;
	}

	.active {
		border-bottom: 4rpx solid #49BDFB;
	}
	
	.shop-status {
		display: flex;
		justify-content: flex-end;
		background-color: #f7f7f7;
		padding: 20rpx;
	}
	
	.total-price {
		display: flex;
		justify-content: flex-end;
		background-color: #f7f7f7;
		padding: 20rpx;
	}

	.payment {
		display: flex;
		justify-content: flex-end;
		background-color: #f7f7f7;
		padding: 20rpx;
	}

	.payment-text {
		border: 2rpx solid #49BDFB;
		padding: 6rpx 40rpx;
		border-radius: 30rpx;
		color: #49BDFB;
	}
</style>
